<template>
  <div>

	<myheader :totalcount="this.totalcount()" :totalprice="this.totalprice()"></myheader>

	<!-- 面包屑导航 -->
	<Breadcrumb :datas = 'datas'></Breadcrumb>

	<section class="cart text-center">
		<div class="container">
			<div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i> Continue Shopping</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">Checkout</a></div>
			</div>
			<div class="row">
				<div class="col-12 text-center">
					<h2 class="mt-5 mb-2">{{ $t('m.your_shopping_cart') }}</h2>
					<p class="mb-5"><span class="primary-color">3</span> Items in your cart</p>
					<table id="cart" class="table table-condensed" >
						<thead>
							<tr>
								<th style="width:60%">{{ $t('m.product') }}</th>
								<th style="width:12%">{{ $t('m.price') }}</th>
								<th style="width:10%">{{ $t('m.quantity') }}</th>
								<th style="width:16%"></th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item, index) in cartlist">
								<td data-th="Product">
									<div class="row">
										<div class="col-md-3 text-left">
											<img :src="'http://127.0.0.1:8000/static/upload/' + item.img" alt="" class="img-fluid">
										</div>
										<div class="col-md-9 text-left mt-sm-2">
											<h4>{{ item.name }}</h4>
										</div>
									</div>
								</td>
								<td data-th="Price">￥{{ item.price }}</td>
								<td data-th="Quantity">
									<input type="number" class="form-control text-center" v-model="item.num">
								</td>
								<td class="actions" data-th="">
									<div class="text-right">
										<button @click="changenum(index, '-')" class="btn btn-white btn-md mb-2"><i class="fas fa-sync"></i>-</button>
										<button @click="changenum(index, '+')" class="btn btn-white btn-md mb-2"><i class="fas fa-trash"></i>+</button>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="float-right text-right">
						<h4>Subtotal:</h4>
						<h1>$147.00</h1>
						<p>(Excluding Delivery)</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6 mb-3 mb-m-1 text-md-left"><a href="catalog.html"><i class="fas fa-arrow-left mr-2"></i> Continue Shopping</a></div>
				<div class="col-sm-6 text-md-right"><a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5">Checkout</a></div>
			</div>
		</div>
	</section>
	
	<myfooter></myfooter>	
    
  </div>
  
</template>


 
<script>
import myheader from './myheader'
import myfooter from './myfooter'

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  // 声明面包屑导航
	  datas: [{title: '首页', route: {name: 'index'}}, {title: '购物车页'}],
	  // 购物车
	  cartlist: [],
    }
  },

  // 注册组件
  components: {
	'myheader': myheader,
	'myfooter': myfooter,
  },

  mounted:function(){
	this.init_cart();
  },
  
  methods:{
	// 封装 删除整行数据逻辑
	delete_one: function (index) {
		this.cartlist.splice(index, 1)
	},
	
	// 增加数量
	changenum: function (index, type) {
		if (type == "+") {
			// 累加操作
			this.cartlist[index].num++;
		} else {
			if (this.cartlist[index].num > 1) {
				// 减法操作
			this.cartlist[index].num--;
			} else {
				this.delete_one(index);
			}
		}
		// 状态续存
		localStorage.setItem('cart', JSON.stringify(this.cartlist))
	},

	// 计算总价
	totalprice: function () {
		var total = 0
		for(let i = 0, l = this.cartlist.length; i < l; i++){	
			total += (this.cartlist[i].num * this.cartlist[i].price);
		}
		return total
	},

	//计算购物车总数
  	totalcount:function(){

  		var total = 0;

  		for(let i=0,l=this.cartlist.length;i<l;i++){

  			total += this.cartlist[i].num;
  		}

  		return total;

	},
	
  	//初始化购物车逻辑
  	init_cart:function(){
  		//将localstorage的数据赋给cartlist
  		var cart = localStorage.getItem("cart");
  		if(cart){
  		this.cartlist = JSON.parse(cart);
  		}
  	},
     
  }
}


</script>
 
<style>



</style>